<template>
	<view class="goods-detail-contain">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,index) in goodsinfo.pics" :key="index">
				<image :src="item.pics_big" @click="preview(index)"></image>
			</swiper-item>
		</swiper>
		<view class="info" v-if="goodsinfo.goods_name">
			<view class="price">
				￥{{goodsinfo.goods_price }}
			</view>
			<view class="desc">
				<view class="title">
					{{goodsinfo.goods_name }}
				</view>
				<view class="save">
					<image src="../../static/other/save.png" mode=""></image>
					<text>收藏</text>
				</view>
			</view>
			<view class="wf">
				快递：免运费
			</view>
		</view>
		<rich-text :nodes="goodsinfo.goods_introduce"></rich-text>
		<!-- 商品导航 -->
		<view class="goods_nav">
			<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
			
		computed:{
			...mapState('m_cart',[]),
			...mapGetters('m_cart',['total'])
			
		},
		watch:{
			total:{
				handler(newvalue){
					const findresult= this.options.find(x=>x.text==='购物车')
					if(findresult){
						findresult.info = newvalue
					}
				},
				immediate:true
			}
		},
		data() {
			return {
				goods_id:'',
				goodsinfo :{},
				 options: [ {
				            icon: 'shop',
				            text: '店铺',
				            infoBackgroundColor:'#007aff',
				            infoColor:"red"
				        }, {
				            icon: 'cart',
				            text: '购物车',
				            info: 0
				        }],
				        buttonGroup: [{
				          text: '加入购物车',
				          backgroundColor: '#ff0000',
				          color: '#fff'
				        },
				        {
				          text: '立即购买',
				          backgroundColor: '#ffa200',
				          color: '#fff'
				        }
				        ]
			}
		},
		onLoad(options){
			this.goods_id = options.goods_id
			this.getgoodsinfo()
			// const findresult1 = JSON.parse(uni.getStorageSync('cart')||'[]')
			// console.log(findresult1[0].goods_count)
			// const findresult= this.options.find(x=>x.text==='购物车')
			// if(findresult){
			// 	findresult.info = findresult1[0].goods_count
			// }
		},
		methods: {
			 ...mapMutations('m_cart',["addtocart"]),
			async getgoodsinfo(){
				const {data:res} = await uni.$http.get('/api/public/v1/goods/detail?goods_id='+this.goods_id)
				if(res.meta.status!=200) return uni.$showMsg()
				res.message.goods_introduce = res.message.goods_introduce.replace(/<img/g,'<img style="display:block;"').replace(/webp/g,'jpg')
				this.goodsinfo = res.message
				console.log(this.goodsinfo)
			},
			preview(index){
				uni.previewImage({
					current:index,
					urls:this.goodsinfo.pics.map(x=>x.pics_big)
				})
			},
			onClick(e){
				 console.log(e)
				 if(e.content.text==='购物车'){
					 uni.switchTab({
					 	url:'/pages/cart/cart'
					 })
				 }
			 },
			 buttonClick(e){
				 console.log(this.goodsinfo)
				 if(e.content.text === '加入购物车'){
					 const goods = {
						 goods_id:this.goodsinfo.goods_id,
						 goods_name:this.goodsinfo.goods_name,
						 goods_price:this.goodsinfo.goods_price,
						 goods_small_logo:this.goodsinfo.goods_small_logo,
						 goods_weight:this.goodsinfo.goods_weight,
						 goods_count:1,
						 goods_state :true
					 }
					 this.addtocart(goods)
				 }
			 },
			
			      
		}
	}
</script>

<style>
swiper{
	height: 750rpx;
}
swiper image{
	width: 100%;
	height: 100%;
}
.info{
	padding: 10px;
	box-sizing: border-box;
}
.price{
	font-size: 16px;
	font-weight: 600;
	color: red;
	margin-bottom: 5px;
}
.desc{
	display: flex;
	font-size: 14px;
}
.desc .title{
	font-size: 600;
	font-size: 14px;
	width: 90%;
	padding: 0px 10px 0px 0px;
	border-right: 1px dotted #ccc;
	
}
.desc .save{
	width: 10%;
	font-size: 12px;
	color: #ccc;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.desc .save image{
	width: 20px;
	height: 20px;
}
.wf{
	margin-top: 5px;
	font-size: 12px;
	color: #ccc;
}
.goods_nav{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
}
.goods-detail-contain{
	padding-bottom: 50px;
}
</style>
